<template>
<div>
	<Row>
		<Col :span="24">
			<Breadcrumb>
				<BreadcrumbItem to="/" @click.native="changeMenu(0)"><Icon type="home"></Icon> 首页</BreadcrumbItem>
				<BreadcrumbItem :to="{'name':'welisten-order-index'}">订单管理</BreadcrumbItem>
				<BreadcrumbItem>{{title}}</BreadcrumbItem>
			</Breadcrumb>
			<div class="cleaner20"></div>
		</Col>
	</Row>
	<Form ref="vform" :model="vform" :label-width="100" :rules="ruleValidate">
		<Row type="flex" :gutter="16">
			<Col :xs="24" :sm="24" :md="17" :lg="17">
				<Row type="flex">
					<Col :span="6" :xs="24" :sm="12" :md="6" :lg="6">
						<FormItem label="用户昵称" prop="nickname">
							<Input v-model="vform.nickname" placeholder="请填写昵称" readonly>
								<Icon type="md-search" slot="suffix"></Icon>
							</Input>
						</FormItem>
					</Col>
					<Col :span="6" :xs="24" :sm="12" :md="6" :lg="6">
						<FormItem label="倾听者昵称" prop="lnickname">
							<Input v-model="vform.lnickname" placeholder="请填写昵称" readonly >
								<Icon type="md-search" slot="suffix"></Icon>
							</Input>
						</FormItem>
					</Col>
					<Col :xs="24" :sm="12" :md="12" :lg="12">
						<FormItem label="倾听者产品" prop="product">
							<Input v-model="vform.title" placeholder="请选择产品" readonly >
								<Icon type="md-search" slot="suffix" ></Icon>
							</Input>
						</FormItem>
					</Col>
					<Col :span="6" :xs="24" :sm="12" :md="6" :lg="6">
						<FormItem label="权重" prop="sequence">
							<InputNumber :max="9999" :min="1" :step="1" v-model="vform.sequence"></InputNumber>
						</FormItem>
					</Col>
					<Col :span="6" :xs="24" :sm="12" :md="6" :lg="6">
						<FormItem label="服务类型">
							<Button v-if="1==vform.service_type" type="success" >通话</Button>
							<Button v-if="0==vform.service_type" type="info">文字</Button>
						</FormItem>
					</Col>
					<Col :span="6" :xs="24" :sm="12" :md="6" :lg="6">
						<FormItem label="产品分类">
							<Button v-if="1==vform.product_type" type="success">套餐</Button>
							<Button v-if="0==vform.product_type" type="info">单品</Button>
						</FormItem>
					</Col>
					<Col :xs="24" :sm="12" :md="6" :lg="6">
						<FormItem label="单价">
							<InputNumber readonly v-model="vform.price"></InputNumber>
						</FormItem>
					</Col>
					<Col :xs="24" :sm="12" :md="6" :lg="6">
						<FormItem label="总时长">
							<InputNumber readonly v-model="vform.actual_qty"></InputNumber>
						</FormItem>
					</Col>
					<Col :xs="24" :sm="12" :md="6" :lg="6">
						<FormItem label="优惠金额" prop="discount">
							<InputNumber :max="9999" :min="0" :step="0.01" v-model="vform.discount"></InputNumber>
						</FormItem>
					</Col>
					<Col :xs="24" :sm="12" :md="6" :lg="6">
					
						<FormItem label="开始时间" prop="started_at">
							<DatePicker disabled @on-change="changeStartedDate" :value="vform.started_at" type="date" show-week-numbers placement="bottom-end" placeholder="请选择开始时间"></DatePicker>
						</FormItem>
					</Col>
					<Col :xs="24" :sm="12" :md="6" :lg="6">
						<FormItem label="结束时间" prop="end_at">
							<DatePicker disabled @on-change="changeEndDate" :value="vform.end_at" type="date" show-week-numbers placement="bottom-end" placeholder="请选择结束时间"></DatePicker>
						</FormItem>
					</Col>
					<Col :xs="24" :sm="12" :md="6" :lg="6">
						<FormItem label="不可取消">
							<i-switch disabled v-model="vform.noncancelable" size="large" :true-value="1" :false-value="0">
								<span slot="open">是</span>
								<span slot="close">否</span>
							</i-switch>
						</FormItem>
					</Col>
					<Col :xs="24" :sm="12" :md="12" :lg="12">
						<FormItem label="不可取消原因" prop="noncancelablemsg">
							<Input v-model="vform.noncancelablemsg" :disabled="vform.noncancelable==0"></Input>
						</FormItem>
					</Col>
					<Col :xs="24" :sm="12" :md="6" :lg="6" v-if="vform.free_qty>0">
						<FormItem label="赠送时长">
							<InputNumber readonly v-model="vform.free_qty"></InputNumber>
						</FormItem>
					</Col>
					<Col :xs="24" :sm="24" :md="24" :lg="24">
						<FormItem label="产品分组" prop="classify">
							<Select disabled v-model="vform.classify" multiple >
								<Option v-for="(item,index) in classifyList" :value="item.value" :key="index">{{ item.label }}</Option>
							</Select>
						</FormItem>
					</Col>
					<Col :xs="24" :sm="24" :md="24" :lg="24">
						<FormItem label="备注">
							<Input v-model="vform.memo"></Input>
						</FormItem>
					</Col>
				</Row>
			</Col>

			<Col :xs="24" :sm="24" :md="7" :lg="7">
				<Card >
					<p slot="title">
						<Icon type="ios-film-outline"></Icon>
						基本信息
					</p>

					<div style="padding-left:10px;padding-right:10px;padding-bottom:10px">

						<FormItem label="订单号" >
							<span>{{vform.oid}}</span>
						</FormItem>
						<FormItem label="订单状态" >
							<Tag :color="statusColor(vform.status)">{{status[vform.status]}}</Tag>
						</FormItem>
						<FormItem label="成交金额" >
							<Tag color="red">￥ {{vform.amount}}</Tag>
						</FormItem>
						<Divider />
						<Button type="success" @click="onSave">保存</Button>
						<div class="cleaner10"></div>
						<Alert>保存按钮只适用于备注和不可取消原因</Alert>
						<div class="cleaner10"></div>
						<!-- <Button type="primary" @click="onSave">延长5分钟</Button> -->
						<Button type="info" @click="onRefund">退款到钱包</Button>
						<Button type="warning" @click="onCancel">取消订单</Button>
						<Button type="error" @click="onDelete">删除订单</Button>
					
					
						
						
					</div>
				</Card>
			</Col>
		</Row>
	</Form>


</div>
</template>
<script>
// 引入子组件
import {mapState,mapGetters} from 'vuex'
import { isNullOrUndefined } from 'util';
import { Divider, Alert, Tag, Card, Page, Modal, Spin, Row, Col, ButtonGroup, Button,  Breadcrumb, BreadcrumbItem, Icon, Form, FormItem, Input, Select, Option, DatePicker, InputNumber } from 'iview';
export default { 
	name:'welisten-order-edit',
	components: { Divider, Alert, Tag, Card, Page, Modal, Spin, Row, Col, ButtonGroup, Button, Breadcrumb, BreadcrumbItem, Icon, Form, FormItem, Input, Select, Option, DatePicker, InputNumber},
	data () {
		return {
			title:'编辑',
			status:['待付款','已付款','已完成','已取消','已过期','已评价','服务中','退款中','已退款'],
			ruleValidate: {
				nickname: [
					{ required: true, message: '请选择用户', trigger: 'blur' },
				],
				status: [
					{ required: true, message: '请填写状态', trigger: 'change', type:'number' }
				],
				sequence: [
					{ required: true, message: '请填写权重', trigger: 'change', type:'number' }
				],
				lnickname: [
					{ required: true, message: '请选择倾听者', trigger: 'blur' },
				],
			},
			

			vform:{
				status: 0,
				nickname: null,
				sequence:1,
				memo:'',
				uid:'',
				content:'',
				product_type:0,
				service_type:0,
				noncancelable:0,
				qty:0,
				price:0,
				discount:0,
			},
			classifyList:[]
		}
	},
	methods:{
		init:function(){
			
			let self=this
			self.$store.dispatch("setSpinShow",true)

			function action1(){return self.$http.get("/v1/welisten/listeners/tags",{params: { 'token': self.token }})}
			function action2(){return self.$http.get("/v1/welisten/orders/"+self.$route.params.id,{params: { 'token': self.token }})}
			
			self.$http.all([action1(),action2()])
			.then(self.$http.spread(function (response1,response2){
				if(200==response1.data.status && 0==response1.data.code)
				{
					response1.data.data.forEach(item=>{
						self.classifyList.push({value: item.id,label: item.name})
					})
					
				}else{self.$Message.error(response1.data.message)}
				if(200==response2.data.status && 0==response2.data.code)
				{
					response2.data.data.price=parseFloat(response2.data.data.price)
					response2.data.data.qty=parseFloat(response2.data.data.qty)
					response2.data.data.amount=parseFloat(response2.data.data.amount)
					response2.data.data.markamount=parseFloat(response2.data.data.markamount)
					response2.data.data.service_type=parseInt(response2.data.data.service_type)
					response2.data.data.actual_qty=parseInt(response2.data.data.actual_qty)
					response2.data.data.free_qty=parseInt(response2.data.data.free_qty)
					response2.data.data.product_type=parseInt(response2.data.data.product_type)
					response2.data.data.sequence=parseInt(response2.data.data.sequence)
					response2.data.data.status=parseInt(response2.data.data.status)
					response2.data.data.discount=parseInt(response2.data.data.discount)
					response2.data.data.started_at=new Date(response2.data.data.started_at*1000)
					response2.data.data.end_at=new Date(response2.data.data.end_at*1000)
					response2.data.data.classify=response2.data.data.classify.substr(1,response2.data.data.classify.length-2)
					response2.data.data.classify=response2.data.data.classify.split(',')
					response2.data.data.noncancelable=parseInt(response2.data.data.noncancelable)
					
					self.vform=response2.data.data
					
				}else{self.$Message.error(response2.data.message)}
				
				self.$store.dispatch("setSpinShow",false)
			})).catch(self.$http.spread(function (error1) {
				self.$store.dispatch("setSpinShow",false)
			}))
		},

		onSave:function(index){
			let self=this
			let _flag=true
			this.$refs.vform.validate((valid) => {
				if (!valid){
					this.$Message.error('请完成必填项')
					_flag=false
				}
			})
			if(!_flag){return}
			
			let _data = JSON.parse(JSON.stringify(self.vform))
			// _data.started_at=self.vform.started_at.getTime()/1000
			// _data.end_at=self.vform.end_at.getTime()/1000

			self.$store.dispatch("setSpinShow",true)
			self.$http.post("/v1/welisten/orders?_method=put&token="+self.token,{'id':self.$route.params.id,'data':JSON.stringify(_data)})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.$Message.success('操作成功')
				}else{
					self.$Message.error(response.data.message)
				}
				self.$store.dispatch("setSpinShow",false)
			}).catch(function(error){
				self.$Message.error(error.message)
				self.$store.dispatch("setSpinShow",false)
			})
		},
		changeStartedDate:function(val, obj){
			this.vform.started_at=new Date(val)
		},
		changeEndDate:function(val, obj){
			this.vform.end_at=new Date(val)
		},
		statusColor:function(status){
			let _color='default'
			switch(status){
				case 1:
					_color='success'
					break 
				case 2:
					_color='success'
					break 
				case 3:
				case 6:
					_color='error'
					break 
				case 4:
					_color='warning'
					break 
				case 6:
					_color='primary'
					break 
			}
			return _color
		},
		onDelete:function(){
			if(0!=this.vform.status && 3!=this.vform.status){
				this.$Message.error('只有待支付和已取消的订单才能删除！')
				return
			}
			this.$Modal.confirm({
				title: '温馨提示',
				content: '删除后不可恢复，确认删除？',
				onOk: () => {
					let self=this
					self.$store.dispatch("setSpinShow",true)
					self.$http.post("/v1/welisten/orders?_method=delete&token="+self.token,{'id':self.$route.params.id,'memo':'后台人工删除'})
					.then(function(response){
						self.$store.dispatch("setSpinShow",false)
						if(200==response.data.status && 0==response.data.code)
						{
							self.vform.status=9
							self.$Message.success('操作成功');
							self.$router.push({name:"welisten-order-index"})
						}else{
							self.$Message.error(response.data.message)
							self.init()
						}
					}).catch(function(error){
						self.$Message.error( error.message)
						self.$store.dispatch("setSpinShow",false)
					})
				},
			})

		},
		onCancel:function(){
			if(0!=this.vform.status){
				this.$Message.error('只有待支付的订单才能取消！')
				return
			}
			let self=this
			self.$store.dispatch("setSpinShow",true)
			self.$http.post("/v1/welisten/orders/cancel?token="+self.token,{'id':self.$route.params.id,'memo':'后台人工取消'})
			.then(function(response){
				self.$store.dispatch("setSpinShow",false)
				if(200==response.data.status && 0==response.data.code)
				{
					self.vform.status=3
					self.$Message.success('操作成功');
				}else{
					self.$Message.error(response.data.message)
					self.init()
				}
			}).catch(function(error){
				self.$Message.error( error.message)
				self.$store.dispatch("setSpinShow",false)
			})
		},
		onRefund:function(){
			if(1!=this.vform.status && 7!=this.vform.status){
				this.$Message.error('只有已支付或退款中的订单才能申请退款！')
				return
			}
			let self=this
			self.$store.dispatch("setSpinShow",true)
			self.$http.post("/v1/welisten/orders/refund?token="+self.token,{'id':self.$route.params.id,'memo':1==this.vform.status?'后台人工退款':'用户申请退款'})
			.then(function(response){
				self.$store.dispatch("setSpinShow",false)
				if(200==response.data.status && 0==response.data.code)
				{
					self.vform.status=8
					self.$Message.success('操作成功');
				}else{
					self.$Message.error(response.data.message)
					self.init()
				}
			}).catch(function(error){
				self.$Message.error( error.message)
				self.$store.dispatch("setSpinShow",false)
			})
		},
		changeStatus:function(id,statusId){
			let self=this
			self.$store.dispatch("setSpinShow",true)
			self.$http.post("/v1/welisten/orders?_method=put&token="+self.token,{'id':id,'data':'{"status":"'+parseInt(statusId)+'"}'})
			.then(function(response){
				self.$store.dispatch("setSpinShow",false)
				if(200==response.data.status && 0==response.data.code)
				{
					if(9==statusId){self.$router.push({name:"welisten-order-index"})}
					else{self.vform.status=statusId}
					self.$Message.success('操作成功');
				}else{
					self.$Message.error(response.data.message)
					self.init()
				}
			}).catch(function(error){
				self.$Message.error( error.message)
				self.$store.dispatch("setSpinShow",false)
			})
		},
	},
	created:function(){
	},
	mounted () {
		this.setTitle(this.title)
	},
	activated:function(){
		if(this.welistenOrder.currentId!=this.$route.params.id){
			this.welistenOrder.currentId=this.$route.params.id
			this.init()
		}
	},
	computed:{
		...mapGetters(['token','welistenOrder']),
		amount:function(){
			return isNullOrUndefined(this.vform.qty) || isNullOrUndefined(this.vform.price)? 0:parseFloat(this.vform.qty*this.vform.price).toFixed(2)
		}
	},
	watch:{
		$route(to) {
			// console.log(to)
		}
	}
}



</script>

<style lang="less" scoped>
</style>